<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=5.0" charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		
		<link type="text/css" rel="stylesheet" href="../css/model/bootstrap.css"  />
		<link type="text/css" rel="stylesheet" href="../css/model/swiper.css"  />
		<link type="text/css" rel="stylesheet" href="../css/layui.css" />
		<link type="text/css" rel="stylesheet" href="../css/top.css" />
		<link type="text/css" rel="stylesheet" href="../css/mall_index.css" />
		
		<script type="text/javascript" src='../js/model/jquery-2.1.4.min.js'></script>
		<script type="text/javascript" src="../js/model/bootstrap.js"></script>
		<script type="text/javascript" src="../js/model/swiper.js"></script>
		
		<script type="text/javascript" src="../js/layer/layer.js"></script>
		<script type="text/javascript" src="../js/mall_index.js"></script>
		
		<title>优当借书</title>
		<script>
			$(function(){
				
				
				window.onload=function(){
					setTimeout(function(){
						$("body").css("opacity",1);
					},300);
					
				}
			})
			
		</script>
	</head>
	<body style="opacity: 0;">
		<div class="top top1" >
			<a href="#" class="goback" >
				<img src="../images/icons/goback1.png"  />
			</a>
			<span></span>
			<div class="menu">
				<img src="../images/icons/menu0.png"  />
			</div>
		</div>
		<div class="top top2" style="display: none;">
			<a href="#" class="goback" >
				<img src="../images/icons/goback2.png"  />
			</a>
			<span>优当商城</span>
			<div class="menu">
				<img src="../images/icons/menu1.png"  />
			</div>
		</div>
		
		<!--轮播图 开始-->
			<div class="myswiper">
				<!--轮播图-->
					<div class="swiper-container swiper-container1" >
				        <div class="swiper-wrapper" >
				            <div class="swiper-slide"><img src="../images/index/top_bg.png"/></div>
				            <div class="swiper-slide"><img src="../images/index/top_bg.png"/></div>
				            <div class="swiper-slide"><img src="../images/index/top_bg.png"/></div>
				        </div>
		        		<!-- Add Pagination -->
		        		<!--<div class="swiper-pagination pagination"></div>-->
		        		<!--<div class="swiper-scrollbar"></div>-->
		        		<div class="swiper-pagination swiper-pagination-fraction" id="swiper-pagination1">
								
						</div>
						<script type="text/javascript" src="../js/model/reset_font.js"></script>
			        	<script type="text/javascript">
			        		$(function(){
			        			setTimeout(mySwiper(),500);
			        		})
			        		function mySwiper(){
			        			var myswiper1 = new Swiper('.swiper-container1', {
							    		autoplay :4000,
							    		loop:true,
							    		pagination: '#swiper-pagination1',
										paginationType : 'fraction',
										paginationClickable: true
						    	});
			        		}
					    	
			        	</script>
			        	
			        </div>
	    			<!--/轮播图-->
			</div>
			<!--轮播图   结束-->
			
		<!--分类导航 开始-->
		<div class="nav" >
			<!--轮播图-->
			<div class="swiper-container swiper-container2" >
				 <div class="swiper-wrapper">
				    <div class="swiper-slide">
				    	<ul>
				    		<li>
				    			<a href="class_detail.html">
				    				<img src="../images/index/nav_cake.png" />
				    				<div>蛋糕</div>
				    			</a>
				    		</li>
				    		<li>
				    			<a href="class_detail.html">
				    				<img src="../images/index/nav_break.png" />
				    				<div>面包</div>
				    			</a>
				    		</li>
				    		<li>
				    			<a href="class_detail.html">
				    				<img src="../images/index/nav_cook.png" />
				    				<div>饼干</div>
				    			</a>
				    		</li>
				    		<li>
				    			<a href="class_detail.html">
				    				<img src="../images/index/nav_drink.png" />
				    				<div>茶饮</div>
				    			</a>
				    		</li>
				    	</ul>
				    </div>
				   	<div class="swiper-slide">
				   		<ul>
				    		<li>
				    			<a href="class_detail.html">
				    				<img src="../images/index/nav_cake.png" />
				    				<div>蛋糕</div>
				    			</a>
				    		</li>
				    		<li>
				    			<a href="class_detail.html">
				    				<img src="../images/index/nav_break.png" />
				    				<div>面包</div>
				    			</a>
				    		</li>
				    		<li>
				    			<a href="class_detail.html">
				    				<img src="../images/index/nav_cook.png" />
				    				<div>饼干</div>
				    			</a>
				    		</li>
				    		<li>
				    			<a href="class_detail.html">
				    				<img src="../images/index/nav_drink.png" />
				    				<div>茶饮</div>
				    			</a>
				    		</li>
				    	</ul>
				   	</div>
				  	<div class="swiper-slide">
				  		<ul>
				    		<li>
				    			<a href="class_detail.html">
				    				<img src="../images/index/nav_cake.png" />
				    				<div>蛋糕</div>
				    			</a>
				    		</li>
				    		<li>
				    			<a href="class_detail.html">
				    				<img src="../images/index/nav_break.png" />
				    				<div>面包</div>
				    			</a>
				    		</li>
				    		<li>
				    			<a href="class_detail.html">
				    				<img src="../images/index/nav_cook.png" />
				    				<div>饼干</div>
				    			</a>
				    		</li>
				    		
				    	</ul>
				  	</div>
				</div>
		        <!-- Add Pagination -->
		        <div class="swiper-pagination pagination2" id="swiper-pagination2"></div>
		       
			    <script type="text/javascript">
			    	$(function(){
			    		setTimeout(mySwiper2(),1000);
			    	})
			    	function mySwiper2(){
			    		var myswiper2 = new Swiper('.swiper-container2', {
									autoplay :false,
							    	pagination : '.pagination2'
						 });
			    	}
					
			    </script>
			</div>
	    	<!--/轮播图-->
		</div>	
		<!--分类导航  结束-->
		
		<!--main 开始-->
		<div class="main" >
		  	<div class="main_title" >
		   		<img src="../images/index/shoplogo2.png" class="shoplogo2" />
		   	   	<span>店铺推荐</span>
			</div>
		   	<div class="content">
		   	  <ul>
		   	  	<li id="1">
		   	  		<div class="item_con" >
		   	  			<a href="book_detail.html">
		   	  				<img src="../images/books/book.png" class="goods_pic"/>
		   	  				<div class="c_name">十万个为什么十万个为什么十万个为什么十万个为什么十万个为什么十万个为什么</div>
		   	  			
			   	  			<div class="c_price">
			   	  				￥<span class="price">59.00</span>
			   	  				<div class="add_buy">
			   	  					<img src="../images/index/gobuy.png" class="gobuy"/>
			   	  				</div>
			   	  			</div>
		   	  			</a>
		   	  		</div>
		   	  	</li>
		   	  	<li id="2">
		   	  		<div class="item_con" >
		   	  			<a href="book_detail.html">
		   	  				<img src="../images/books/booka.png" class="goods_pic"/>
		   	  				<div class="c_name">一千零一夜</div>
		   	  			
			   	  			<div class="c_price">
			   	  				￥<span class="price">99.00</span>
			   	  				<div class="add_buy">
			   	  					<img src="../images/index/gobuy.png" class="gobuy"/>
			   	  				</div>
			   	  			</div>
		   	  			</a>
		   	  		</div>
		   	  	</li>
		   	  	<li>
		   	  		<div class="item_con" >
		   	  			<a href="book_detail.html">
		   	  				<img src="../images/books/bookb.png" class="goods_pic"/>
		   	  				<div class="c_name">白雪公主</div>
			   	  			<div class="c_price">
				   	  				￥<span class="price">59.00</span>
				   	  				<div class="add_buy">
				   	  					<img src="../images/index/gobuy.png" class="gobuy"/>
				   	  				</div>
				   	  		</div>
			   	  		</a>
		   	  		</div>
		   	  	</li>
		   	  	<li>
		   	  		<div class="item_con" >
		   	  			<a href="book_detail.html">
		   	  				<img src="../images/books/bookb.png" class="goods_pic"/>
		   	  				<div class="c_name">白雪公主</div>
			   	  			<div class="c_price">
				   	  				￥<span class="price">59.00</span>
				   	  				<div class="add_buy">
				   	  					<img src="../images/index/gobuy.png" class="gobuy"/>
				   	  				</div>
				   	  		</div>
			   	  		</a>
		   	  		</div>
		   	  	</li>
		   	  	<!--<div class="clear"></div>-->
		   	  </ul>
		   </div>
		   <!--content 结束-->
		   <script type="text/javascript" src="../js/layui.all.js"></script>
		   <script>
		   	layui.use('flow', function(){
			  var flow = layui.flow;
			 
			  flow.load({
			    elem: '.content ul' //流加载容器
			    ,scrollElem: '' //滚动条所在元素，一般不用填，此处只是演示需要。
			    ,done: function(page, next){ //执行下一页的回调
			      
			      //模拟数据插入
			      setTimeout(function(){
			        var lis = [];
			        var html='<li>'+
				   	  		'<div class="item_con">'+
				   	  		'<a href="book_detail.html">'+
				   	  		'<img src="../images/books/bookb.png" class="goods_pic"/>'+
				   	  		'<div class="c_name">白雪公主</div>'+		
					   	  	'<div class="c_price">'	+
						   	'￥<span class="price">59.00</span>' +				
						   	'<div class="add_buy">'  +				
						   	'<img src="../images/index/gobuy.png" class="gobuy"/>'+ 					
						   	'</div>' +				
						   	'</div>' +		
					   	  	'</a>'+		
				   	  		'</div>'+
				   	  		'</li>'
				   	  
			        for(var i = 0; i <3; i++){
			          lis.push(html);
			          
			        }
			        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
			        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
			        next(lis.join(''), page < 5); //假设总页数为 10
			        
			      }, 500);
			     
			    }
			  });
			 })
		   </script>
		</div>
		<!--主体  结束-->
		
		<!--footer开始-->
		<div class="footer">
			<a href="#" class="foot_left">
				<img src="../images/icons/save.png"  />
				<span>我的收藏</span>
			</a>
			<a href="#" class="foot_right">
			
				<div class="amount" style="display: none;">
					
				</div>
				<img src="../images/icons/buycar.png"  />
				<span>借购车</span>
			</a>
		</div>
		<!--footer结束-->
	</body>
</html>
